<template>
	<view class="box">
		<!-- <view class="title">教练认证</view> -->
	<!-- 	<view class="form">
			<view class="form-label">上传教练资质证书</view>
			<view class="form-upload">
				<view class="form-upload-item" v-for="(it,index) in form.coach">
					<image :src="it" mode="aspectFill"></image>
					<image :src="ossUrl + `/static/15.png`" mode="" class="layout-img-list-item-del"
							@click="delImg(index,'coach')"></image>
				</view>
				<view class="form-upload-item">
					<image :src="ossUrl +  '/static/image/组149.png'" mode="" @click="selectClick('coach')"></image>
				</view>
				
				
			</view>
		</view>
		<view class="title">场地认证</view>
		<view class="form">
			<view class="form-label">上传场地资质证书</view>
			<view class="form-upload">
				<view class="form-upload-item" v-for="(it,index) in form.site">
					<image :src="it" mode="aspectFill"></image>
					<image :src="ossUrl + `/static/15.png`" mode="" class="layout-img-list-item-del"
							@click="delImg(index,'site')"></image>
				</view>
				<view class="form-upload-item">
					<image :src="ossUrl +  '/static/image/组149.png'" mode="" @click="selectClick('site')"></image>
				</view>
			</view>
		</view>
		<view class="title">职业选手</view>
		<view class="form">
			<view class="form-label">上传职业选手资质证书</view>
			<view class="form-upload">
				<view class="form-upload-item" v-for="(it,index) in form.career">
					<image :src="it" mode="aspectFill"></image>
					<image :src="ossUrl + `/static/15.png`" mode="" class="layout-img-list-item-del"
							@click="delImg(index,'career')"></image>
				</view>
				<view class="form-upload-item">
					<image :src="ossUrl +  '/static/image/组149.png'" mode="" @click="selectClick('career')"></image>
				</view>
			</view>
		</view> -->
		<view class="tip"  v-if="[1,2,3].includes(info.status)">
			<!-- 2审核中 1通过 3驳回 -->
			<u-alert :title="info.status === 2 ? '审核中' : info.status === 1 ? '审核通过' : '驳回'" :type="info.status === 2 ? 'warning' : info.status === 1 ? 'success' : 'error'" :description = "info.status === 3 ? info.remark : ''"></u-alert>
		</view>
		<view class="title">实名认证</view>
		<view class="form">
			<view class="form-label">上传身份证正反面</view>
			<view class="form-upload sf">
				<image :src="form.sfz[0] != '' ? form.sfz[0] : ossUrl + '/static/image/s1.png'" mode="aspectFit" @click="sfUpload(0)"></image>
				<image :src="form.sfz[1] != '' ? form.sfz[1] : ossUrl + '/static/image/s2.png'" mode="aspectFit" @click="sfUpload(1)"></image>
			</view>
		</view>
	<!-- 	<view class="subTitle" v-html="content"></view> -->
	<!-- 	<view class="help" @click="toRule" style="margin-bottom: 10rpx;">
			<image :src="ossUrl +  '/static/image/wenhao.png'" mode=""></image>
			{{content}}
		</view> -->
		<view class="help" style="height: fit-content;">
			<!-- <image :src="ossUrl +  '/static/image/wenhao.png'" mode=""></image> -->
			{{info.certification_instructions}}
		</view>
		<view class="btns" @click="submit()">提交</view>
	</view>
</template>

<script>
	import {InformationEditAuthentication,InformationAuthentication,InformationHelpContent} from '@/common/http/api.js'
	import {
		uploadImg
	} from '@/common/upload.js'
  import {ossDel} from "../../common/oss";
	export default {
		data() {
			return {
				form:{
					// coach: [], //教练
					// site: [], //场地
					// career: [], //职业选手
					sfz: ['','']
				},
				info:'',
				content: ''
			};
		},
		onLoad() {
			uni.showLoading()
			InformationAuthentication().then(res => {
				if(res.data.prompt == 1){
					uni.showToast({duration:3000,
						title: res.data.remark,
						icon: 'none'
					})
				}
				this.info = res.data
				// this.form.coach = Array.isArray(res.data.coach) && res.data.coach.length > 0 ? res.data.coach.filter(i=> i) : res.data.coach
				// this.form.site = Array.isArray(res.data.site) && res.data.site.length > 0 ? res.data.site.filter(i=> i) : res.data.site
				// this.form.career = Array.isArray(res.data.career) && res.data.career.length > 0 ? res.data.career.filter(i=> i) : res.data.career
				this.form.sfz = res.data.sfz.length === 0 ? ['',''] : res.data.sfz
			}).finally(e => {
				uni.hideLoading()
			})
			InformationHelpContent({id: 20}).then(res=>{
				this.content = res.data.name
			})
		},
		methods:{
      ossDel,
			toRule(){
				uni.navigateTo({
					url:'/pagesA/aboutUs/aboutUs?id=20'
				})
			},
			selectClick(name) {
				uploadImg().then(res => {
					console.log('上传', res)
					this.form[name].push(res.data.url)
				})
			},
			sfUpload(index){
				uploadImg().then(res => {
					console.log('上传', res)
					this.form.sfz[index] = res.data.url
					this.$forceUpdate()
				})
			},
			delImg(index,name){
				this.form[name].splice(index,1)
			},
			submit(){
				let status = 0
				// if(this.form.coach.length > 0) {
				// 	status++
				// }
				// if(this.form.site.length > 0) {
				// 	status++
				// }
				// if(this.form.career.length > 0) {
				// 	status++
				// }
				if(this.form.sfz.some(i=> i === '')){
					uni.showToast({duration:3000,
						title:'请上传身份证！',
						icon:'none'
					})
					return
				}
				
				
				let data = {
					// coach: this.form.coach.join(','),
					// site: this.form.site.join(','),
					// career: this.form.career.join(','),
					sfz: this.form.sfz.join(',')
				}
				uni.showLoading()
				InformationEditAuthentication(data).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: '提交成功!',
						icon: 'none'
					})
					this.$store.commit('setIsRefresh', true)
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		padding-bottom: 30rpx;
	}
	.help {
		width: 750rpx;
		height: 71rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 22rpx 69rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #12B475;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		image {
			width: 32rpx;
			height: 33rpx;
			margin-right: 10rpx;
		}
	}
.title {
	height: 86rpx;
	background: #F6F7F8;
	box-sizing: border-box;
	padding-left: 30rpx;
	display: flex;
	align-items: center;
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 30rpx;
	color: #23B97F;
}
.form {
	width: 100%;
	box-sizing: border-box;
	padding:22rpx 30rpx;
	.form-label {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #131313;
		margin-bottom: 39rpx;
	}
	.form-upload {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.form-upload-item {
			width: 170rpx;
			height: 170rpx;
			position: relative;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			&>image {
				width: 170rpx;
				height: 170rpx;
			}
			.layout-img-list-item-del {
				width: 38rpx;
				height: 38rpx;
				position: absolute;
				top: -15rpx;
				right: -15rpx;
				z-index: 2;
			}
		}
		&>image {
			width: 170rpx;
			height: 170rpx;
			margin-bottom: 20rpx;
		}
	}
	.sf {
		display: flex;
		justify-content: space-between;
		image {
			width: 325rpx;
			height: 220rpx;
		}
	}
}
.subTitle {
	width: 665rpx;
	box-sizing: border-box;
	padding: 15rpx 22rpx;
	background: #E6FFF5;
	border-radius: 20rpx;
	margin: 0 auto;
	font-family: PingFang SC;
	font-weight: 300;
	font-size: 24rpx;
	color: #292B3B;
	margin-top: 30rpx;
}
.btns {
		width: 578rpx;
		height: 86rpx;
		background: #12B475;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(177,177,177,0.45);
		border-radius: 43rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto;
	}
</style>
